<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div>
            <el-row style="width: 100%">
                <el-button style="float:left" type="primary" @click="change(3)">全部课程</el-button>
                <el-button style="float:left" type="success" @click="change(1)">审核通过</el-button>
                <el-button style="float:left" type="info" @click="change(2)">审核中</el-button>
                <el-button style="float:left" type="warning" @click="change(0)">审核失败</el-button>
                <el-button type="danger" @click="add" style="float: right">新增课程</el-button>
            </el-row>
        </div>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="cover"
                            label=""
                            align="center"
                    >
                        <template slot-scope="scope">
                            <img :src="scope.row.cover" height="50px">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="classname"
                            label="课程名称"
                            align="center"
                            >
                        <template slot-scope="scope">
                            <span  style="color:gray;">{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="ismoney"
                            label="是否付费"
                            align="center">
                        <template slot-scope="scope">
                            <span style="color:orange;"  v-if="scope.row.price===0.00">免费</span>
                            <span style="color:red;"  v-else>收费</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格"
                            align="center">
                        <template slot-scope="scope">
                            <span  style="color:red;">{{scope.row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="checkStatus"
                            label="状态"
                            align="center">
                        <template slot-scope="scope">
                            <span style="color:blue;" v-if="scope.row.checkStatus==1">已通过</span>
                            <span style="color:blue;" v-else-if="scope.row.checkStatus==0">未通过</span>
                            <span style="color:blue;" v-else>待审核</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="上下架"
                            align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==0" style="color:gray;"> <el-button size="mini" type="info" @click="updateStatus(scope.row)" plain>课程下架</el-button></span>
                            <span v-else style="color:red;"> <el-button size="mini" type="danger" @click="updateStatus(scope.row)" plain>课程上架</el-button></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="250px"
                    >
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.row.id)">修改</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="guanli(scope.row.id)">课时管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "lbgl",
        data() {
            return {
                tagtitle:"",
                tab:"",
                dialogImageUrl: '',
                dialogVisible: false,
                currentPage: 1,
                pageSize:5,
                //总条数
                total:0,
                changeStatus:3,

                cate2:[],
                cate3:[],
                obj:{},
                selectTwo:false,
                select3:false,
                activeName: 'first',
                tableData: [],
            };
        },
        created() {
            this.init();
        },
        methods: {
            updateStatus(row){
                var that=this;
                this.$http.post(`core/course/updateStatus`,row).then(function (resp) {
                        if (resp.data.code===2000){
                            that.$message.success(resp.data.msg)
                        }else {
                            that.$message.error(resp.data.msg);
                        }
                    that.init();
                })
            },
            change(item){
                this.changeStatus=item;
                this.currentPage=1;
                this.init();
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.init();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.init();
            },
            add(){
                this.$router.push({name:'add'});
            },
            handleEdit(id){
                this.$router.push({
                    name:'add',
                    params:{
                        courseId:id,
                    }
                 });
            },
            guanli(id){
                this.$router.push({
                    name:'chapter',
                    params:{
                        courseid:id,
                    }
                });
            },
            init(){
              var that=this;
              this.$http.post(`core/course/findCoursesByCheckStatus/${this.currentPage}/${this.pageSize}/${this.changeStatus}`).then(function (resp) {
                  that.tableData=resp.data.result.records;
                  that.total=resp.data.result.total;
              })
            },
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .kcfl{
        display: inline;
        float: left;
        margin-left: 30px;
    }
    .kcjs .info{
        display: inline;
    }
</style>